<template>
	<view class="invite-friend-bg">
		<view class="invite-friend-box">
			<view class="congratulation"><text>恭喜获得</text></view>
			<view class="experience-card">
				<view class="experience-card-hint">分享更多好友，获得更多体验天数</view>
				<view class="experience-btn" @click="toLook">去看看</view>
			</view>
		</view>
		<view class="inviteSuccess-btn">
			<view class="invite-friend-logo"><image src="http://static.kuaimayoupin.com/761480521711644.png" mode="aspectFit"></image></view>
			<view class="inviteSuccess-title"><image src="http://static.kuaimayoupin.com/4741493543262223.png" mode="aspectFit"></image></view>
			<view class="invite-friend-bot">
				<view class="invite-friend-info">
					最近
					<text>火爆朋友圈</text>
					的交友软件 你还不知道就out啦,
					<text>赶紧进来看看</text>
					吧~
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		toLook(){
			uni.switchTab({
			    url: '/pages/home2/home?type=ding'
			});
		},
		picsuccess(e) {
			console.log(e);
		}
	}
};
</script>

<style lang="scss" scoped>
.invite-friend-bg {
	height: 100vh;
	background: linear-gradient(180deg, rgba(164, 30, 51, 1) 0%, rgba(199, 31, 46, 1) 100%);
}
.invite-friend-logo {
	image {
		display: block;
		width: 148upx;
		height: 144upx;
		margin: auto;
	}
}
.congratulation {
	color: #fff;
	padding-left: 60upx;
	font-size: 36upx;
}
.invite-friend-box {
	background: url(http://static.kuaimayoupin.com/959651587211795.png) no-repeat;
	width: 750upx;
	height: 528upx;
	background-size: 100% 100%;
	padding-top: 235upx;
	box-sizing: border-box;
	.invite-friend-logo {
		image {
			display: block;
			width: 148upx;
			height: 144upx;
			margin: auto;
		}
	}
}
.inviteSuccess-btn {
	margin-top: 200upx;
}
.inviteSuccess-title {
	image {
		width: 510upx;
		height: 92upx;
		display: block;
		margin: auto;
	}
}
.experience-card {
	width: 750upx;
	height: 448upx;
	margin: auto;
	background: url(http://static.kuaimayoupin.com/5346399970398339.png) no-repeat;
	background-size: 100% 100%;
	position: relative;
	.experience-btn {
		position: absolute;
		bottom: 90upx;
		left: 0;
		right: 0;
		margin: auto;
		width: 274upx;
		line-height: 68upx;
		background: linear-gradient(180deg, rgba(247, 239, 130, 1) 0%, rgba(251, 192, 61, 1) 100%, rgba(252, 235, 137, 1) 100%);
		border-radius: 17px;
		color: rgba(211, 43, 68, 1);
		text-align: center;
	}
	.experience-card-hint {
		color: rgba(255, 255, 255, 1);
		text-align: center;
		position: absolute;
		bottom: 180upx;
		left: 0;
		right: 0;
		margin: auto;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.6);
	}
}
.invite-friend-info {
	color: #ecc990;
	width: 560upx;
	line-height: 60upx;
	font-size: 32upx;
	margin: auto;
	text-align: center;
	margin-bottom: 40upx;
	text {
		font-size: 36upx;
	}
}
</style>
